<template>
    <div id="box">
        <div class="container">
            <ul class="link">
                <li><img src="../assets/img/logo.png" alt=""> 陕理工校园音乐</li>
                <router-link to="/recommend" activeClass="active" tag="li">发现音乐</router-link>
                <router-link to="/center" activeClass="active" tag="li">我的音乐</router-link>
                <router-link to="/download" activeClass="active" tag="li">应用下载</router-link>
            </ul>
            <div class="function">
                <div class="search">
                    <i class="iconfont icon-icon-test" @click="handleSearch"></i>
                    <input type="text" placeholder="音乐/视频" v-model="key" @keyup.enter="handleSearch">
                </div>
                <div class="button">
                    <div class="logout" v-show="$store.state.currentUser">
                        <h3 :title="$store.state.currentUser && $store.state.currentUser.name">{{ $store.state.currentUser && $store.state.currentUser.name }}</h3>
                        <button @click="handleClick('logout')">退出</button>
                    </div>
                    <div class="login" v-show="!$store.state.currentUser">
                        <button @click="handleClick">登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            key: ''
        }
    },
    methods: {
        handleClick(method) {
            if (method == 'logout') {
                axios.get('http://localhost:3000/admin/logout').then(res => {
                    this.$store.commit('changeCurrentUser', null)
                })
            } else {
                this.$router.push({ path: '/login' });
            }
        },
        handleSearch() {
            this.$router.push({ path: `/search/${this.key}` });
            this.key = '';
        }
    }
}
</script>

<style lang="scss" scoped>
    .active {
        background-color: #000;

        &::after {
            content: "";
            display: block;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border: 7px solid transparent;
            border-bottom-color: #C20C0C;
        }
    }

    #box {
        background-color: #242424;
        color: #ccc;

        .container {
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;
            max-width: 1200px;
            height: 70px;
            margin: 0 auto;

            .link {
                flex: 1 1 auto;
                max-width: 60%;
                height: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;
                cursor: pointer;

                li {
                    position: relative;
                    height: 100%;
                    padding: 0 20px;
                    line-height: 70px;

                    &:hover {
                        background-color: #000;
                    }

                    &:first-child {
                        font-size: 1.5rem;
                    }

                    &:first-child:hover {
                        background-color: #242424;
                    }

                    img {
                        height: 80%;
                        vertical-align: middle;
                    }
                }
            }

            .function {
                flex: 1 1 auto;
                max-width: 30%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: flex-start;
                align-items: center;

                .search {
                    position: relative;

                    i {
                        position: absolute;
                        top: 6px;
                        left: 4px;
                        cursor: pointer;
                    }

                    input {
                        padding: 7px 25px;
                        margin-right: 10px;
                        border: none;
                        border-radius: 15px;
                    }
                }

                .button {
                    flex: 1 1 auto;
                    display: flex;
                    flex-flow: row nowrap;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;

                    .logout {
                        flex: 1 1 auto;
                        display: flex;
                        flex-flow: row nowrap;
                        justify-content: space-evenly;
                        align-items: center;

                        h3 {
                            max-width: 50px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                            cursor: pointer;
                        }

                        button {
                            background-color: #242424;
                            border: none;
                            color: #ccc;
                            cursor: pointer;

                            &:hover {
                                color: #aaa;
                            }
                        }
                    }

                    .login {
                        flex: 1 1 auto;
                        padding-left: 10px;

                        button {
                            background-color: #242424;
                            border: none;
                            color: #ccc;
                            cursor: pointer;

                            &:hover {
                                color: #aaa;
                            }
                        }
                    }
                }
            }
        }
    }
</style>